<template>
    <div class="indexSecond">
      <div class="black">
        <h2>从零开始，探索领克</h2>
        <p>你的出行，从此焕然一新</p>
        <p>与你的领克一起，唤醒城市</p>
      </div>
      <div class="grey">
        <div class="over">
          <mt-swipe :auto="0">
            <mt-swipe-item>
              <img src="../../assets/images/indexImg/01a.png" alt="" class="one">
              <img src="../../assets/images/indexImg/L01.png" alt="" class="two">
              <p class="top">我是01</p>
              <p>我是01PHE</p>
              <p>我是01</p>
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../../assets/images/indexImg/02a.png" alt="" class="one">
              <img src="../../assets/images/indexImg/L02.png" alt="" class="two">
              <p class="top">我是02</p>
              <p>我是02HEV</p>
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../../assets/images/indexImg/03a.png" alt="" class="one">
              <img src="../../assets/images/indexImg/L03.png" alt="" class="two">
              <p class="top">我是03</p>
              <p>我是03PHEV</p>
              <p>我是03</p>
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../../assets/images/indexImg/05big.png" alt="" class="one">
              <img src="../../assets/images/indexImg/05car3.png" alt="" class="two">
              <p class="top">我是05</p>
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "swiper2"
    }
</script>

<style scoped>
.black{
  background: black;
  padding:60px 0 130px;
  color: aliceblue;
}
.black p{
  margin: 10px 0;
}
  .grey{
    height: 300px;
    background: url("../../assets/images/indexImg/longgray.jpg");
    position: relative;
    top: -1px;
  }
  .over{
    position: relative;
    top: -100px;
    height: 400px;
    bottom: 1px;
  }
  .one{
    transform: scale(0.7);
    transition: all 2s;
    position: absolute;
    top:-20px;
    right: 30px;
  }
  .two{
    position: absolute;
    top: 50px;
    left: -250px;
  }
.grey .over .is-active .one{
  transform: scale(0.45);
  transition: all 1s;
}
  .grey .over .is-active .two{
    transform: translateX(125%);
    transition: all 1s;
  }
.grey .over p{
  width: 120px;
  height: 40px;
  border: 1px solid orange;
  text-align: center;
  line-height: 40px;
  color: orange;
  margin: 30px auto 0;
}
.grey .over .top{
  margin-top: 180px;
}
</style>
